<template>
  <a-button v-if="!isEdit" class="margin-bottom20" type="primary" @click="edit">编辑</a-button>
  <template v-else>
    <a-button class="margin-bottom20 margin-right16" @click="cancel">取消</a-button>
    <a-button class="margin-bottom20" type="primary" @click="save">保存</a-button>
    <a-button class="margin-left20" type="primary" @click="getFormValuesValidate">校验并获取表单值</a-button>
  </template>
  <view-edit
    ref="viewEditRef"
    :grid="3"
    :isEdit="isEdit"
    :configJsonArr="configJsonArr"
    :baseData="baseData"
  >

  </view-edit>
</template>

<script setup>
import { ref, watch } from 'vue'
import ViewEdit from 'components/ViewEdit'
const configJsonArr = ref([
    {
      type: 'a-input',
      label: '部门名称',
      name: 'structure_name',
      rules: [
        { required: true, message: '请输入部门名称' },
      ],
      props: {
        allowClear: true,
        placeholder: '请输入部门名称',
        style: 'width: 320px;',
      },
      watch: true,
      watchMethod: 'structureNameChange'
    },
    {
      label: '全详情',
      name: 'editText',
      changeFromItem: false,//编辑时依旧是详情文本形式
    },
    {
      type: 'a-textarea',
      label: '备注',
      name: 'structure_textarea_name',
      rules: [
        { required: true, message: '请输入备注' },
      ],
      props: {
        type: '',
        allowClear: true,
        placeholder: '请输入备注',
        style: 'width: 320px;',
        change:(e)=> inputChange(e)
      }
    },
    {
      type: 'a-select',
      label: '部门主管',
      name: 'manager_uuid',
      props: {
        showSearch: true,
        allowClear: true,
        placeholder: '请选择部门主管',
        style: 'width: 320px;',
        labelInValue: true,
        options: [
          {
            label:"马大哈",
            value: 1
          },
          {
            label:"李小虾",
            value: 2
          },
          {
            label:"刘大虾",
            value: '刘大虾'
          },
        ],
      },
    },
    {
      type: 'a-select',
      label: '自定义选择',
      name: 'selectAuto',
      showValue: 'selectAutoShowValue',
      props: {
        allowClear: true,
        placeholder: '请选择',
        style: 'width: 320px;',
        // bordered: false,
        maxTagCount: 2,
        maxTagTextLength: 4,
        mode: 'multiple',
        // labelInValue: true,
        fieldNames: {
          label: 'name',
          value: 'code',
        },
        options: [
          {
            name:"选项一",
            code: 1
          },
          {
            name:"选项二",
            code: 2
          },
          {
            name:"选项三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三",
            code: 3
          },
          {
            name:"选项四",
            code: 4
          },
          {
            name:"选项五",
            code: 5
          },
        ],
      },
    },
    {
      type: 'a-input-number',
      label: '数字输入框',
      name: 'number',
      props: {
        step: 0.01,
        min: 0,
        max: 1000,
        precision: 2,
        prefix: '￥'
      }
    },
    {
      type: 'a-radio-group',
      label: '单选框',
      name: 'radio',
      props: {
        name: 'radio1',
        // optionType: 'button',
        options: [
          {
            label: '苹果',
            value: 1
          },
          {
            label: '梨子',
            value: 2
          },
        ],
      }
    },
    {
      type: 'a-rate',
      label: '评分',
      name: 'rate',
      props: {
        count: 5,
        allowClear: true,
        // disabled: true,
        allowHalf: true,
        // character: "好",
        tooltips: ['一星', '二星', '很棒', '优秀', '卓越']
      }
    },
    {
      type: 'a-time-picker',
      label: '时间选择器',
      name: 'timePicker',
      props: {
        placeholder: '请选择时间',
        allowClear: true,
        // showNow: true,
        // use12Hours: true,
        valueFormat: 'HH:mm:ss'
      }
    },
    {
      type: 'a-cascader',
      label: '级联选择',
      name: 'cascader',
      props: {
        allowClear: true,
        fieldNames: {
          label: 'title',
          value: 'code',
          children: 'children'
        },
        options: [
          {
            title: '广东省',
            code: 1001,
            children: [
              {
                title: '茂名市',
                code: 1011,
              },
              {
                title: '广州市',
                code: 1012,
              },
            ]
          },
          {
            title: '深圳市',
            code: 1002,
          }
        ]
      }
    },
    {
      type: 'a-cascader',
      label: '级联搜索',
      name: 'cascaderSearch',
      props: {
        allowClear: true,
        showSearch: {
          filter: (inputValue, path)=>cascaderFilter(inputValue, path)
        },
        options: [
          {
            label: '广东省',
            value: 1001,
            children: [
              {
                label: '茂名市',
                value: 1011,
              },
              {
                label: '广州市',
                value: 1012,
              },
            ]
          },
          {
            label: '深圳市',
            value: 1002,
          }
        ]
      }
    },
    {
      type: 'a-tree-select',
      label: '树状选择器',
      name: 'treeSelect',
      props: {
        placeholder: '请选择树',
        allowClear: true,
        style: 'width: 320px;',
        fieldNames: {children: 'childs',label: 'title', value:'value'},
        treeCheckable: true,
        treeData: [
          {
            title: '树祖父',
            value: 1,
            // selectable: false,
            childs: [
              {
                title: '树爷爷',
                value: 11,
                // checkable: true,
                childs: [
                  {
                    title: '树姑姑',
                    value: 113,
                  },
                  {
                    title: '树舅舅',
                    value: 114,
                  },
                  {
                    title: '树爸爸',
                    value: 111,
                    childs: [
                      {
                        title: '树儿子',
                        value: 1111,

                      },
                      {
                        title: '树儿媳',
                        value: 1112,
                      },
                    ]
                  },
                  {
                    title: '树妈妈',
                    value: 112,
                  },
                ]
              },
              {
                title: '树奶奶',
                value: 12,
              },
            ]
          },
          {
            title: '树祖母',
            value: 2,
            isLeaf: true,
            checkable: true,
          }
        ]
      }
    },
    {
      type: 'a-date-picker',
      label: '日期选择器-年月日',
      name: 'YYYMMDD',
      props: {
        placeholder: '请选择年月日',
        allowClear: true,
        style: 'width: 320px;',
        valueFormat: 'YYYY-MM-DD'
      }
    },
    {
      type: 'a-date-picker',
      label: '日期选择器-年月',
      name: 'YYYMM',
      props: {
        placeholder: '请选择年月',
        picker: 'month',
        allowClear: true,
        style: 'width: 320px;',
        valueFormat: 'YYYY-MM'
      }
    },
    {
      type: 'a-date-picker',
      label: '日期选择器-年',
      name: 'YYY',
      props: {
        placeholder: '请选择年',
        picker: 'year',
        allowClear: true,
        style: 'width: 320px;',
        valueFormat: 'YYYY'
      }
    },
    {
      type: 'a-range-picker',
      label: '日期起始选择器-年月日',
      name: 'YYYMMDDSE',
      props: {
        placeholder: ['请选择开始日期', '请选择结束日期'],
        allowClear: true,
        style: 'width: 320px;',
        valueFormat: 'YYYY-MM-DD'
      }
    },
    {
      type: 'a-range-picker',
      label: '日期起始选择器-年月',
      name: 'YYYMMSE',
      props: {
        placeholder: ['请选择开始日期', '请选择结束日期'],
        picker: 'month',
        allowClear: true,
        style: 'width: 320px;',
        valueFormat: 'YYYY-MM'
      }
    },
    {
      type: 'a-range-picker',
      label: '日期起始选择器-年',
      name: 'YYYSE',
      props: {
        placeholder: ['请选择开始日期', '请选择结束日期'],
        picker: 'year',
        allowClear: true,
        style: 'width: 320px;',
        valueFormat: 'YYYY'
      }
    },
    {
      type: 'a-upload',
      label: '合同附件',
      name: 'file1',
      rules: [{ required: true, message: '请上传合同附件' }],
      props: {
        fileList: [],
        placeholder: '请输入',
      }
    }
  ])

const baseData = ref({
    structure_name: "测试",
    editText: '编辑是详情',
    YYY: "2024",
    YYYMM: "2024-01",
    YYYMMDD: "2024-01-21",
    YYYMMDDSE:["2024-01-01","2024-01-01"],
    YYYMMSE: ["2024-01","2024-12"],
    YYYSE: ["2020","2020"],
    cascader: [1001,1011],
    cascaderSearch: [1002],
    number: 2.01,
    radio: 1,
    rate: 1,
    selectAuto: [1, 2],
    selectAutoShowValue: '选项一、选项二',
    manager_uuid: {
      value: 1,
      label:'马大哈'
    },
    structure_textarea_name: "玩玩",
    timePicker: "16:06:11",
    treeSelect: [12,113,114,112,1111,1112]
  })
const isEdit = ref(true)
const viewEditRef = ref()
  // 点击保存
  const save = async(index)=> {
    // 获取值
    let res = await viewEditRef.value.getAllValues(true)

    if(res) {
      console.log(res,"---res表单值-----");
      isEdit.value = false
    }
  }
  // 点击取消
  const cancel = (index)=> {
    isEdit.value = false
    viewEditRef.value.showOriginFormState()
  }
  // 点击编辑
  const edit = (index)=> {
    isEdit.value = true
  }
  // 获取表单值
  const getFormValuesValidate = async()=> {
    let res = await viewEditRef.value.getAllValues(true)
    console.log(res,"------校验获取表单值----");
  }
</script>

<style lang="less" scoped>

</style>
